<template>
	<div class="Ddnav">
		<ul>
			<li :class="{'active':orderNavindex==0}"><router-link to="/myorder">全部</router-link></li>
			<li :class="{'active':orderNavindex==1}"><router-link to="/myorder/orderpay">待付款</router-link></li>
			<li :class="{'active':orderNavindex==2}"><router-link to="/myorder/orderfa">待发货</router-link></li>
			<li :class="{'active':orderNavindex==3}"><router-link to="/myorder/ordershou">待收货</router-link></li>
			<li :class="{'active':orderNavindex==4}"><router-link to="/myorder/orderover">已完成</router-link></li>
		</ul>
		<span class="orderNavbiao"></span>
		<navfot></navfot>
	</div>
</template>

<script>
	import navfot from '@/components/nav'
	export default{
		name:'Ddnav',
		props:['msg'],
		components:{navfot},
		data(){
			return{
				orderNavindex:0
			}
		},
		created:function(){
			this.orderNavindex=this.msg;
			
		},
		mounted:function(){
			var self=this;
			$(".orderNavbiao").css("left",self.orderNavindex*20+6+'%');
//			$("#hhh").css("display","none")
//			var element = document.getElementById('hhh');
//			element.src = "../img/icon_user_pre@3x.png";
			$("#hhh").attr("src","http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/wode.png");
		}
	}
</script>

<style>
	.Ddnav{
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:0.9rem;
		font-size:0;
		background-color:#fff;
		box-sizing: border-box;
		/*box-shadow: 0 -0.18rem 0.4rem 0rem #4b9c31;*/
		z-index: 999;
	}
	.Ddnav ul{
		z-index: 99;
	}
	.Ddnav ul li{
		text-align: center;
		display: inline-block;
		height:0.86rem;
		width:20%;
		box-sizing: border-box;
		line-height: 0.86rem;
	}
	.Ddnav ul li a{
		font-size:0.28rem;
		color:#666;
	}
	.Ddnav ul .active a{
		color:#fb9722;
	}
	.orderNavbiao{
		width:0.6rem;
		height:0.04rem;
		border-radius:0.04rem;
		background-color:#fb9722;
		display: inline-block;
		position:absolute;
		bottom:0;
		left:6%;
		z-index: 999;
	}
</style>